<template>
  <div class="profile-container">
    <a-card class="profile-card" :bordered="false" :style="{ width: '850px' }">
      <h2 class="profile-title">个人信息</h2>
      <div class="profile-content">
        <!-- 左侧头像区域 -->
        <div class="avatar-section">
          <a-avatar :size="120" class="avatar">
            <img
              v-if="userInfo.userAvatar"
              :src="userInfo.userAvatar"
              alt="头像"
            />
            <span v-else>{{ userInfo.userName?.charAt(0) || "用户" }}</span>
          </a-avatar>
          <a-upload
            action="/api/upload"
            :show-file-list="false"
            @change="handleAvatarChange"
            class="upload-btn"
            disabled
          >
            <a-button type="outline" size="small">更换头像</a-button>
          </a-upload>
        </div>
        <!-- 右侧表单区域 -->
        <div class="form-section">
          <a-form :model="userInfo" layout="vertical" auto-label-width>
            <a-form-item label="用户名" field="userAccount">
              <a-input v-model="userInfo.userAccount" disabled />
            </a-form-item>
            <a-form-item label="身份" field="userRole">
              <a-input v-model="userInfo.userRole" disabled />
            </a-form-item>
            <a-form-item label="性别" field="gender">
              <a-input v-model="userInfo.gender" />
            </a-form-item>
            <a-form-item label="昵称" field="userName">
              <a-input v-model="userInfo.userName" />
            </a-form-item>
            <!-- 密码修改 -->
            <a-form-item label="密码修改" field="userPassword">
              <a-input-password
                v-model="userInfo.userPassword"
                placeholder="请输入新密码"
                allow-clear
              />
            </a-form-item>
            <a-form-item label="确认密码" field="checkPassword">
              <a-input-password
                v-model="userInfo.checkPassword"
                placeholder="请再次输入密码"
                allow-clear
              />
            </a-form-item>
            <a-form-item>
              <a-space>
                <a-button type="primary" @click="handleSubmit"
                  >保存修改</a-button
                >
              </a-space>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { UserControllerService } from "../../generated";
import message from "@arco-design/web-vue/es/message";

// 用户信息数据
let userInfo = ref({
  id: "",
  userName: "",
  userAccount: "",
  userAvatar: "",
  gender: "",
  userRole: "",
  userProfile: "", // 未传
  userPassword: "",
  checkPassword: "",
});

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});

const loadData = async () => {
  const res = await UserControllerService.getLoginUserUsingGet();
  if (res.code === 0) {
    userInfo.value = {
      id: res.data.id,
      gender: res.data.gender,
      userName: res.data.userName,
      userAccount: res.data.userAccount,
      userAvatar: res.data.userAvatar,
      userRole: res.data.userRole,
      // userProfile: res.data.userProfile,
    };
  } else {
    message.error("加载失败，" + res.message);
  }
};

// 头像上传处理
const handleAvatarChange = (file) => {
  // 这里应该是上传逻辑
  Message.success("头像上传成功");
  userInfo.value.avatar = URL.createObjectURL(file.file);
};

// 提交表单
const handleSubmit = () => {
  console.log(userInfo.value);
  if (userInfo.value.userPassword !== userInfo.value.checkPassword) {
    Message.error("两次输入的密码不一致");
    return;
  }
  UserControllerService.updateUserUsingPost(userInfo.value).then((res) => {
    Message.success("个人信息更新成功");
  });
};
</script>

<style scoped>
.profile-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.profile-card {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.profile-title {
  text-align: center;
  margin-bottom: 24px;
  color: var(--color-text-1);
}

.profile-content {
  display: flex;
  gap: 40px;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.avatar {
  background-color: var(--color-primary-light-1);
  font-size: 36px;
  cursor: pointer;
}

.upload-btn {
  margin-top: 10px;
}

.form-section {
  flex: 1;
}

.verify-btn {
  margin-left: 10px;
}

@media (max-width: 768px) {
  .profile-content {
    flex-direction: column;
  }

  .avatar-section {
    margin-bottom: 20px;
  }
}
</style>
